import React, { Component } from 'react';
import { connect } from 'dva';
import {
    Row,
    Col,
    Icon,
    Card,
    Tabs,
    Table,
    Radio,
    DatePicker,
    Tooltip,
    Menu,
    Dropdown,
    Select,
} from 'antd';
import numeral from 'numeral';
import {
    ChartCard,
    yuan,
    MiniArea,
    MiniBar,
    MiniProgress,
    Field,
    Bar,
    Pie,
    TimelineChart,
} from '../../components/Charts';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';

import styles from './BusinessStatistics.less';
import moment from 'moment';
const { Description } = DescriptionList;

const RangePicker = DatePicker.RangePicker;
const salesData = [];
const addData = [];
const poorData = [];
for (let i = 0; i < 12; i += 1) {
    salesData.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 1000) + 200,
    });
}
for (let i = 0; i < 12; i += 1) {
    addData.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 500) + 200,
    });
}
for (let i = 0; i < 12; i += 1) {
    poorData.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 800) + 200,
    });
}

function onChange(dates, dateStrings) {
    console.log('From: ', dates[0], ', to: ', dates[1]);
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}


export default class BusinessStatistics extends Component {
    state = {
    };

    render() {
        return (
            <div>
                <PageHeaderLayout
                    title="业务统计"
                    logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
                >
                    <Card
                        className={styles.salesCard}
                        bordered={false}
                        title="销售额趋势"
                        bodyStyle={{ padding: 24 }}
                    >
                        <DescriptionList col={2}>
                            <Description term="">
                            </Description>
                            <Description term="">
                                <p >
                                    今日  本周  本月
                                <RangePicker
                                        ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
                                        showTime
                                        format="YYYY/MM/DD HH:mm:ss"
                                        onChange={onChange}
                                    />
                                </p>
                            </Description>
                        </DescriptionList>
                        <DescriptionList style={{ marginBottom: 32 }} col={2}>
                            <Description term="">
                            </Description>
                            <Description term="">
                                <p style={{ textAlign: 'right' }}>
                                    <Icon type="smile-o" />今日  <Icon type="smile-o" />本周  <Icon type="smile-o" />本月

                                </p>
                            </Description>
                        </DescriptionList>
                        <Bar
                            height={300}
                            data={salesData}
                        // data={addData}
                        // data={poorData}
                        />
                    </Card>
                </PageHeaderLayout>

            </div>
        );
    }
}
